<template>
  <div class="page-console">
    <!-- <h1>主控台</h1> -->
    <div id="bar" style="width: 500px; height: 300px"></div>
    <div id="line" style="width: 500px; height: 300px"></div>
    <div id="main" style="width: 500px; height: 300px"></div>
    <div id="main" style="width: 500px; height: 300px"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts' //全部导出，没有默认导出
// console.log(echarts);
// import{init} from 'echarts'
import { ref, onMounted } from 'vue'
onMounted(() => {
  setCharts()
})

// 设置可视化图表
const setCharts = () => {
  // 柱状图表
  const barChart = echarts.init(document.getElementById('bar'))
  barChart.setOption(baroptions)
  // 折线图表
  const lineChart =echarts.init(document.getElementById('line'))
  lineChart.setOption(lineptions)

}

const baroptions = {
  title: {//标题
    text: '访问量'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {//坐标指示器
      type: 'cross',//指示器类型
      label: {
        backgroundColor: '#555555'//鼠标放上显示小窗口的背景颜色
      }
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type:'value',
      boundaryGap: false,
      data: ['1月sadasd','2月','3月','4月','5月','6月','7月','8月'],
      show:false
    }
  ],
  yAxis: [
    {
      type:'category',
      boundaryGap: false,
      show:false,
      
    }
  ],
  series: [
    {
      name: '访问量', // 系列名称
      type: 'bar', // 系列图表类型
      data: [8000,6000,7655,4568,1889,8942,12384,8413],// 系列中的数据内容
      colorBy:'data',//值为data时,柱形图为彩色默认为一种颜色
      barWidth:12,//柱形图宽度
      itemStyle:{
        emphasis:{
          barBorderRadius:7//圆角
        },
        normal:{
          barBorderRadius:7//圆角
        }
      }
    }
  ]
}
const lineptions = {
  title: {
    text: '用户来源'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#E9EEF3'
      }
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      // boundaryGap: false,
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子']
    }
  ],
  yAxis: [
    {}
  ],
  series: [
    {
      name: '销量', // 系列名称
      type: 'line', // 系列图表类型
      data: [5, 20,  10, 20] // 系列中的数据内容
    }
  ]
}
</script>
<style>
.page-console{
  display: flex;
}
</style>